<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="/css/basic.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="/css/common.css"/>
</head>

<body th:fragment="header">
<script src="/js/jquery.min.js"></script>
<!-- 提示弹框库 -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.11.1/sweetalert2.all.min.js"></script>-->
<script src="/js/sweetalert2.all.min.js"></script>
<script src="/js/common.js"></script>
<style>
    .login-before {
        height: 52px;
    }
</style>

<div class="top">
    <div class="warp">

        <div class="top-01">
            <span id="localtime"></span><br/>
            <a href="/helpCenter#8">常见问题</a>丨<a href="/helpCenter">新手指南</a>
        </div>

        <div class="mous">
            <!-- 登录前 -->
            <div class="top-02 fr login-before" th:if="${#lists.isEmpty(session.loginSession)}">
                <form>
                    <a class="login m20l" href="javascript:void(0)">登陆</a>
                    <a class="rentk m15l" href="/register">注册</a>
                </form>
            </div>

            <!-- 登录后 -->
            <div class="top-02-login fr" th:if="${session.loginSession}">
                <span id="accountName" style="cursor: pointer">
                    <p class="fl" th:text="${session.loginSession.userName}"></p>
                    <a href="/levelDiscount">
                        <img align="middle" class="m5l m20t m5r fl" width="20" src="/images/zzb.png" />
                        <p class="fl" th:text="'LV'+${session.loginSession.getUserLevel()}"></p>
                    </a>
                </span>
                <p id="accountMessage" class="znx" style="cursor: pointer">站内信<i th:if="${unReadMsgNum>0}" th:text="${unReadMsgNum}"></i></p>
                <span id="accountCenter"><a href="/deposit" th:text="'账户中心: '+${#numbers.formatDecimal(session.loginSession.userBalance, 0, 'COMMA', 2, 'POINT')}"></a><br /></span>
                <span class="fl"><a href="/logout">退出<img src="/images/ico25.png" /></a></span>
            </div>

            <!-- 客服 -->
            <div class="top-03 fl">
                <a href="http://wpa.qq.com/msgrd?v=3&uin=800022936&site=qq&menu=yes" target="_blank">
                    <img src="/images/hyw-02.png"/>在线客服</a>
            </div>
        </div>
    </div>
</div>

<!--下拉菜单-->
<div class="login-menu">
    <div class="login-menu-wrapper">
        <div class="service"></div>
        <div class="text-01 once">
            <h2>在线帮助中心</h2>
            <p class="text">7×24 随时为您服务</p>
            <a href="http://wpa.qq.com/msgrd?v=3&uin=800022936&site=qq&menu=yes" target="_blank" class="online">在线客服</a>
        </div>
        <div class="line"></div>
        <div class="text-01">
            <h2>创建一个锦绣账户</h2>
            <p class="text">只需一个锦绣帐户即可使用所有锦绣产品和服务</p>
            <a href="/register" class="free">免费注册</a>
        </div>
        <div class="line"></div>
        <div class="user-login">
            <h3>用户登录</h3>
            <form id="loginForm">
                <p><input type="text" name="userName" placeholder="用户名"  class="txt"></p>
                <p><input type="password" name="password" placeholder="密码"  class="txt"></p>
            </form>
            <a href="/forgotpasswordone" class="forget">忘记密码?</a>
            <a id="loginSubmit" href="javascript:void(0)" class="login-btn">登录</a>
        </div>
    </div>
</div>

<!-- 菜单栏 -->
<div class="navbg device">
    <div class="warp">
        <div class="logo"><a href="/"><img src="/images/logo.jpg"></a></div>
        <ul class="nav fr">
            <li class="tytz"><a href="javascript:void(0)">体育投注<span></span></a></li>
            <li class="zryl" th:attrappend="class=${pageName=='zryl'?' crent':''}"><a href="/zryl">真人娱乐<span th:attr="class=${pageName=='zryl'?'on':''}"></span></a></li>
            <li class="cp" th:attrappend="class=${pageName=='lottery'?' crent':''}"><a href="/lottery">彩票<span th:attr="class=${pageName=='lottery'?'on':''}"></span></a></li>
            <li class="dzyx" th:attrappend="class=${pageName=='elecGame'?' crent':''}"><a href="/elecGame">电子游戏<span th:attr="class=${pageName=='elecGame'?'on':''}"></span></a></li>
            <li th:attr="class=${pageName=='promotion'?'crent':''}"><a href="/promotion">优惠活动<span th:attr="class=${pageName=='promotion'?'on':''}"></span></a></li>
            <li th:attr="class=${pageName=='mobileClient'?'crent':''}"><a href="/mobileClient">移动客户端<span th:attr="class=${pageName=='mobileClient'?'on':''}"></span></a></li>
        </ul>
    </div>
    <!--cp下拉菜单-->
    <div class="menu-next01 fx01 menu-la" style="display: none;">
        <div class="menu-top cp-01">
            <a href="javascript:void(0);" class="pic"><img src="/images/hyw-top-01.png" alt=""> <span class="text">进入场馆</span></a>
            <a href="javascript:void(0);" class="pic"><img src="/images/hyw-top-02.png" alt=""><span class="text">进入场馆</span></a>
        </div>
        <div class="menu-enter">
        </div>
    </div>
    <!--dzyx下拉菜单-->
    <div class="menu-next01 fx02 menu-la" style="display: none;">
        <div class="menu-top cp-03">
            <a href="javascript:void(0);" class="pic"><em class="num">1.2<i>%</i></em> <span class="text1">每天返水，不限上限</span></a>
            <div class="line"></div>
            <a href="javascript:void(0);" class="pic"><img src="/images/hyw-top-03.png" alt=""> <span class="text">进入场馆</span></a>
            <div class="line"></div>
            <a href="javascript:void(0);" class="pic"><img src="/images/hyw-top-04.png" alt=""><span class="text">进入场馆</span></a>
            <div class="line"></div>
            <a href="javascript:void(0);" class="pic"><img src="/images/hyw-top-05.png" alt=""><span class="text">进入场馆</span></a>
        </div>
        <div class="menu-enter">
        </div>
    </div>
    <!--tytz下拉菜单-->
    <div class="menu-next01 fx03 menu-la" style="display: none;">
        <div class="menu-top cp-04">
            <a href="javascript:void(0);" class="pic"><img src="/images/hyw-top-06.png" alt=""> <span class="text1">步步高升的会员特权</span></a>
            <div class="line"></div>
            <a href="javascript:void(0);" class="pic"><img src="/images/hyw-top-07.png" alt=""><span class="text">开始投注</span></a>
            <div class="line"></div>
            <a href="javascript:void(0);" class="pic"><img src="/images/hyw-top-08.png" alt=""><span class="text1">天天返水最高8％ 不设上限</span></a>
        </div>
        <div class="menu-enter">
        </div>
    </div>
    <!--zryl下拉菜单-->
    <div class="menu-next01 fx04 menu-la" style="display: none;">
        <div class="menu-top cp-05">
            <a href="javascript:void(0);" class="pic"><img src="/images/zryl-01.png" alt=""> <span class="text">进入场馆</span></a>
            <div class="line"></div>
            <a href="javascript:void(0);" th:if="${#lists.isEmpty(session.loginSession)}" class="pic"><img src="/images/zryl-02.png" alt=""><span class="text">进入场馆</span></a>
            <a href="" target="_blank" id="zryl-jxg-index" th:if="${session.loginSession}" th:href="@{${session.loginSession.hgGameLobbyUrl}}" class="pic"><img src="/images/zryl-02.png" alt=""><span class="text">进入场馆</span></a>
            <div class="line"></div>
            <a href="javascript:void(0);" class="pic"><img src="/images/zryl-03.png" alt=""><span class="text">进入场馆</span></a>
            <div class="line"></div>
            <a href="javascript:void(0);" class="pic"><img src="/images/zryl-04.png" alt=""><span class="text">进入场馆</span></a>
        </div>
        <div class="menu-enter">
        </div>
    </div>
</div>

<link rel="stylesheet" href="/js/loading/loading.css">
<script src="/js/loading/loading.js"></script>
<script th:inline="javascript">
    var currentTime = [[${currentTime}]];
    var today = new Date(currentTime);
    var tempTime = today.getTime();
</script>
<script>
    var jiuXiuLoad = new Loading();
    jiuXiuLoad.init();

    $(".menu-la").mouseover(function(){
        $(this).css("display","block");
    });
    $(".menu-la").mouseout(function(){
        $(this).css("display","none");
    });
    $(".navbg .warp .nav .cp").mouseover(function(){
        $(".fx01").css("display","block");
    });
    $(".navbg .warp .nav .cp").mouseout(function(){
        $(".fx01").css("display","none");
    });
    $(".navbg .warp .nav .dzyx").mouseover(function(){
        $(".fx02").css("display","block");
    });
    $(".navbg .warp .nav .dzyx").mouseout(function(){
        $(".fx02").css("display","none");
    });
    $(".navbg .warp .nav .tytz").mouseover(function(){
        $(".fx03").css("display","block");
    });
    $(".navbg .warp .nav .tytz").mouseout(function(){
        $(".fx03").css("display","none");
    });
    $(".navbg .warp .nav .zryl").mouseover(function(){
        $(".fx04").css("display","block");
    });
    $(".navbg .warp .nav .zryl").mouseout(function(){
        $(".fx04").css("display","none");
    });
    $(".top .login-before").mouseover(function(){
        $(".login-menu").css("display","block");
    });
    $(".top .login-before").mouseout(function(){
        $(".login-menu").css("display","none");
    });
    $(".login-menu").mouseover(function(){
        $(".login-menu").css("display","block");
    });
    $(".login-menu").mouseout(function(){
        $(".login-menu").css("display","none");
    });
    $(".nav li").mouseover(function(){
        $(this).addClass('li-hover');
        $(this).children().find("span").addClass('span-hover');
    });
    $(".nav li").mouseout(function(){
        $(this).removeClass('li-hover');
        $(this).children().find("span").removeClass('span-hover');
    });

    $("#accountName").click(function () {
        // window.location.href = "/deposit"
    });

    $("#accountMessage").click(function () {
        window.location.href = "/systemMessageReceive"
    });

    $("#accountCenter").click(function () {
        window.location.href = "/deposit"
    });

    $("#loginSubmit").click(function () {
        var userName = $("input[name='userName']").val();
        var password = $("input[name='password']").val();
        if (userName.trim().length == 0 || password.trim().length == 0) {
            alertWorning("用户名 或者 密码不能为空!");
            return;
        }

        jiuXiuLoad.start();
        $.ajax({
            method: "POST",
            url: "/api/loginSubmit",
            data: $("#loginForm").serializeArray(),
            dataType: "json"
        }).done(function (msg) {
            jiuXiuLoad.stop();
            if (msg.status == 'success') {
                window.location.href = '/deposit';
            } else {
                alertWorning(msg.data);
            }
        });
    })

    function showLocale(objD) {
        var str;
        var yy = objD.getYear();
        if (yy < 1900) yy = yy + 1900;
        var MM = objD.getMonth() + 1;
        if (MM < 10) MM = '0' + MM;
        var dd = objD.getDate();
        if (dd < 10) dd = '0' + dd;
        var hh = objD.getHours();
        if (hh < 10) hh = '0' + hh;
        var mm = objD.getMinutes();
        if (mm < 10) mm = '0' + mm;
        var ss = objD.getSeconds();
        if (ss < 10) ss = '0' + ss;
        str = "GMT+8 " + yy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss;
        return (str);
    }

    function tick() {
        var currtDate = new Date(tempTime);
        document.getElementById("localtime").innerHTML = showLocale(currtDate);
        tempTime += 1000;
    }

    setInterval(function(){tick();},1000);

</script>
</body>
</html>
